<ion-header>
    <ion-navbar>
        <ion-title>
        表单组建
        </ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
    <h1>输入框</h1>
    <ion-list> 
        <ion-item> 
            <ion-label>用户名</ion-label> 
            <!--这个input标签不能直接结尾-->
            <ion-input type="text" [(ngModel)]="name" ></ion-input> 
        </ion-item> 
        <ion-item> 
            <ion-label stacked>电话</ion-label> 
            <!--这个input标签不能直接结尾-->
            <!--不同的type ，调用不同的键盘类型-->
            <ion-input type="tel" [(ngModel)]="tel" ></ion-input> 
        </ion-item> 
        <ion-item> 
            <ion-label floating>邮箱</ion-label> 
            <!--这个input标签不能直接结尾-->
            <ion-input type="email" [(ngModel)]="email" ></ion-input> 
        </ion-item> 
        <p>名称:{{name}}</p>
        <p>电话:{{tel}}</p>
        <p>邮箱:{{email}}</p>
    </ion-list>

    <!--下拉列表框-->
    <h1>下拉列表框</h1>
    <ion-list> 
        <ion-item>
            <ion-label>最喜欢的老师</ion-label> 
            <!--设置可以多选-->
            <ion-select > 
                <ion-option value="1">苍老师</ion-option>
                <!--添加select，来设定默认选中哪一条-->
                <ion-option value="2" selected="">雨宫老师</ion-option> 
                <ion-option value="3">波老师</ion-option> 
                <ion-option value="4">其他</ion-option> 
            </ion-select> 
        </ion-item>
        <ion-item> 
            <ion-label>喜欢的电影</ion-label> 
            <!--设置可以多选-->
            <ion-select multiple="true"> 
                <ion-option value="1">科幻</ion-option>
                <!--添加select，来设定默认选中哪一条-->
                <ion-option value="2" selected="">喜剧</ion-option> 
                <ion-option value="3">爱情</ion-option> 
                <ion-option value="4">悬疑</ion-option> 
                <ion-option value="5">恐怖</ion-option> 
            </ion-select> 
        </ion-item> 
    </ion-list>


    <h1>单选组件</h1>
    <ion-list radio-group>
        <ion-list-header>请选择：</ion-list-header> 
        <ion-item> 
            <ion-label>选项1</ion-label>
             <ion-radio value="1" checked></ion-radio>
        </ion-item> 
        <ion-item> 
             <ion-label>选项2</ion-label> 
             <ion-radio value="2"></ion-radio>
        </ion-item>
    </ion-list>
    <h1>复选组件</h1>
    <ion-list>
        <ion-list-header>请选择：</ion-list-header> 
        <ion-item>
            <ion-label>Java</ion-label>
            <ion-checkbox ></ion-checkbox>
        </ion-item>
        
        <ion-item>
            <ion-label>Python</ion-label>
            <ion-checkbox disabled="true"></ion-checkbox>
        </ion-item>
        
        <ion-item>
            <ion-label>Nodejs</ion-label>
            <ion-checkbox checked="true"></ion-checkbox>
        </ion-item>
    </ion-list>

    <h1>Toggle组件</h1>
    <ion-list>
        <ion-item>
            <ion-label>JAVA</ion-label>
            <!--checked 是否选中、
                disabled 是否可用
                value 值-->
            <ion-toggle checked="true"></ion-toggle>
        </ion-item>
        <ion-item>
                <ion-label>NodeJS</ion-label>
                <!--checked 是否选中、
                    disabled 是否可用
                    value 值-->
                <ion-toggle disabled="true" checked="true"></ion-toggle>
            </ion-item>
    </ion-list>
    <h1>日期控件</h1>
    <ion-list> 
        <ion-item> 
            <ion-label>出生日期</ion-label> 
            <!--displayFormat 日期格式 
                min 最小日期
                max 最大日期
                pickerFormat 这种很少用，用在选择器和日期格式不一致的情况下
            -->
            <ion-datetime displayFormat="YYYY/MM/DD" min="2012" max="2018-05-30"></ion-datetime> 
        </ion-item> 
        <ion-item> 
                <ion-label>入学日期</ion-label> 
                <ion-datetime displayFormat="YYYY年MM月DD日" min="2012" max="2018-05-30"></ion-datetime> 
            </ion-item> 
    </ion-list>

    <h1>范围选择</h1>
    <ion-list> 
        <ion-list-header>百分比</ion-list-header> 
        <ion-item> 
            <!--pin 用户控制在滑动的时候，是否显示字，表示滑动到那儿了
                min 最小值
                max 最大值
                step 步长
                snaps 在范围上标刻度-->
            <ion-range pin="true" min="1" max="100"></ion-range> 
        </ion-item> 
        <ion-list-header>长度（米）</ion-list-header> 
        <ion-item> 
            <ion-range pin="true" min="0" step="10" max="100" snaps="true" ></ion-range> 
        </ion-item> 
    </ion-list>
</ion-content>
